import React from 'react';

const initialState = { error: null };

class ErrorBoundary extends React.Component {
  state = initialState;
  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { error };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    if (this.props.onError) {
      this.props.onError(error, errorInfo.componentStack);
    }
  }

  render() {
    const { fallback, FallbackComponent } = this.props;
    const { error } = this.state;
    if (error !== null) {
      const fallbackProps = { error };
      // 判断 fallback 是否为合法的 Element
      if (React.isValidElement(fallback)) {
        return fallback;
      }
      // 判断是否存在 FallbackComponent
      if (FallbackComponent) {
        return <FallbackComponent {...fallbackProps} />;
      }

      throw new Error('ErrorBoundary 组件需要传入 fallback, FallbackComponent 其中一个');
    }
    return this.props.children;
  }
}

export default ErrorBoundary;
